<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<title>完美拖拽</title>
	<style type="text/css">
		html,body{overflow:hidden;}
		body,div,h2,p{margin:0;padding:0;}
		body{color:#fff;background:#000;font:12px/2 Arial;}
		p{padding:0 10px;margin-top:10px;}
		span{color:#ff0;padding-left:5px;}
		#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
		#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
		#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		//拖拽上标框进行移动
		var box = document.getElementById("box");
		var posArr = [];
		box.children[0].onmousedown = function(e){
			var e = e || event;
			var mousex = e.offsetX;
			var mousey = e.offsetY;
			document.onmousemove = function(e){
				var e = e || event;
				box.style.left = e.clientX - mousex + "px";
				box.style.top = e.clientY - mousey + "px";
				//在移动的时候 用一个数组来记录位置
				posArr.push({x:box.offsetLeft, y:box.offsetTop});
			}
		}
		document.onmouseup = function(){
			document.onmousemove = "";
		}
		//在点击回放按钮之后回放
		box.children[0].children[0].onclick = function(){
			//把数组中的数据从后往前取 pop() 并删除
			
			box.goback = setInterval(function(){
				var pos = posArr.pop();
				if(posArr.length == 0){
					clearInterval(box.goback);
					return;
				}
				box.style.left = pos.x + "px";
				box.style.top = pos.y + "px";
			},20);
		}
	};
	</script>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span>false</span></p>
    <p><strong>offsetTop:</strong><span>231</span></p>
    <p><strong>offsetLeft:</strong><span>533</span></p>
</div>


</body></html>